<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>内嵌框架智能表单</title>
    <style>
        .fieldname,
        .submit {
            text-align: right;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<form>
    <table>
        <tr>
            <td class="fieldname">Username:</td>
            <td><label for="username"><input id="username" type="text"></label></td>
            <td><a id="username-availability" href="#">Check Availability</a></td>
        </tr>
        <tr>
            <td class="fieldname">Email:</td>
            <td><label for="email"><input id="email" type="email"></label></td>
            <td><a id="email-availability" href="#">Check Availability</a></td>
        </tr>
        <tr>
            <td class="fieldname">Password:</td>
            <td><label for="password"><input id="password" type="password"></label></td>
        </tr>
        <tr>
            <td class="fieldname">Verify Password:</td>
            <td><label for="verify-passowrd"><input id="verify-passowrd" type="password"></label></td>
        </tr>
        <tr>
            <td class="submit" colspan="2"><label for="submit"><input id="submit" type="submit"></label></td>
            <td></td>
        </tr>
    </table>
</form>
<iframe id="frame" class="hidden" src="about:blank" name="frame"></iframe>
<script>
    function HttpRequest(url, callback) {
        this.request = new XMLHttpRequest();
        this.request.open('GET', url);
        this.request.onreadystatechange = reqReadyStateChange;

        var that = this;

        function reqReadyStateChange() {
            if (that.request.readyState == 4) {
                if (that.request.status == 200) {
                    callback(that.request.responseText);
                } else {
                    alert('An error occurred trying to contact the server.');
                }
            }
        }
    }

    HttpRequest.prototype.send = function () {
        this.request.send(null);
    }
</script>
<script>
    function checkUsername(e) {
        e.preventDefault();
        var username = document.getElementById('username').value;
        if (!username) {
            alert('Please enter a user name to check!');
            return;
        }
        frames['frame'].location = 'formvalidator.php?username=' + username;
    }

    function checkEmail(e) {
        e.preventDefault();
        var email = document.getElementById('email').value;
        if (!email) {
            alert('Please enter an email to check!');
            return;
        }
        frames['frame'].location = 'formvalidator.php?email=' + email;
    }

    function handleResponse(text) {
        var response = JSON.parse(text);
        if (response.available) {
            alert(response.searchTerm + ' is available!');
        } else {
            alert('We\'re sorry, but ' + response.searchTerm + ' is not available.');
        }
    }

    document.getElementById('username-availability').addEventListener('click', checkUsername);
    document.getElementById('email-availability').addEventListener('click', checkEmail);
</script>
</body>
</html>